import { defineStore } from "pinia"
import { reactive, computed } from "vue"
import { Menu } from "@/types/response/Menu"
import http, { setItem, getItem } from "@/utils";
import { defaultMenu } from "@/router";

export const useMenuStore = defineStore('menu', () => {
  const state: {
    menuList: Menu[]
  } = reactive({
    menuList: []
  })

  const getMenuList = computed(() => {
    return state.menuList
  })

  const setMenuList = (info: Menu[]) => {
    state.menuList = info
  }

  const httpMenuList = async () => {
    let res = await http.menuList();
    res.unshift(...defaultMenu)
    setMenuList(res)
    setItem("menu", getMenuList.value)
  }

  return { getMenuList, setMenuList, httpMenuList }
})